<template>
  <div class="weather-info">
    <!-- ECharts 图表 -->
    <div class="echarts">
      <ECharts :option="weatherOption" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ECharts from "@/components/ECharts/index.vue";

// 模拟天气数据
const weatherOption = ref({
  title: {
    text: "实时天气预报",
    left: "center",
    textStyle: {
      color: "#ffffff",
      fontSize: 18
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    formatter: (params: any) => {
      const weather = params[2].data; // 天气数据
      return `
        时间: ${params[0].axisValue}<br/>
        温度: ${params[0].data}℃<br/>
        湿度: ${params[1].data}%<br/>
        天气: ${weather}
      `;
    }
  },
  legend: {
    data: ["温度", "湿度", "天气"],
    top: 30,
    textStyle: {
      color: "#ffffff"
    }
  },
  grid: {
    left: "10%",
    right: "10%",
    bottom: "15%",
    top: "20%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: ["上午6点", "上午9点", "中午12点", "下午3点", "下午6点", "晚上9点"],
    axisLine: {
      lineStyle: {
        color: "#ffffff"
      }
    },
    axisLabel: {
      fontSize: 12
    }
  },
  yAxis: [
    {
      type: "value",
      name: "温度 (℃)",
      axisLine: {
        lineStyle: {
          color: "#ffffff"
        }
      },
      axisLabel: {
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#555"
        }
      }
    },
    {
      type: "value",
      name: "湿度 (%)",
      position: "right",
      axisLine: {
        lineStyle: {
          color: "#ffffff"
        }
      },
      axisLabel: {
        fontSize: 12
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "温度",
      type: "line",
      data: [22, 24, 27, 29, 25, 21], // 模拟温度数据
      smooth: true,
      lineStyle: {
        color: "#ff6666"
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#ff6666"
      }
    },
    {
      name: "湿度",
      type: "bar",
      yAxisIndex: 1,
      data: [65, 70, 60, 55, 58, 62], // 模拟湿度数据
      barWidth: "40%",
      itemStyle: {
        color: "#66ccff"
      }
    },
    {
      name: "天气",
      type: "scatter",
      data: ["晴", "多云", "小雨", "多云", "晴", "多云"], // 模拟天气数据
      symbol: "rect",
      symbolSize: 16,
      itemStyle: {
        color: "#fff"
      }
    }
  ]
});
</script>

<style lang="scss" scoped>
.weather-info {
  padding: 20px;
  color: #ffffff;
  background: #0c0a4a;
  border-radius: 8px;
  .echarts {
    width: 100%;
    height: 400px;
    margin-top: 20px;
  }
}
</style>
